<template>
	<view class="content">
		<view class="header">
			<view class="tap">
				<view class="tap-item" :class="tap == 0 ? 'active':''" data-index="0" @click="changeTap">
					未使用
				</view>
				<view class="tap-item" :class="tap == 1 ? 'active':''" data-index="1" @click="changeTap">
					已使用/过期
				</view>
			</view>
		</view>
		<view class="list" :class="tap==1?'paddingtop':''">
			<view class="search-view" v-if="tap == 0">
				<view class="search-input">
					<view class="input-view">
						<input type="text" placeholder="请输入您获得的礼品卡号进行绑定" v-model="card_sn" />
					</view>
					<view class="bind-btn" @click="bindCard">绑定</view>
				</view>
			</view>
			<giftCard v-for="(item,index) in giftArr" :key="index" :active="tap" :datasource="item"></giftCard>
		</view>
		<view class="bottom-view">
			<view class="commint-btn" @click="buyGiftcard">购买礼品卡</view>
		</view>
		<!-- <view class="list">
			
		</view> -->
		<view class="list" v-if="giftArr.length==0">
			<noData></noData>
		</view>
		<!-- #ifdef MP -->
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<!-- #endif -->
	</view>
</template>

<script>
	import noData from '@/components/noData/index.vue'
	import giftCard from '@/components/giftCard-item/index.vue'
	import {
		getUserGiftCard
	} from '@/api/peopleHide.js'
	import {
		mapGetters
	} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	export default {
		components: {
			noData,
			giftCard,
			// #ifdef MP
			authorize,
			// #endif
		},
		data() {
			return {
				tap: 0,
				noData: true,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				giftArr: [],
				card_sn: ''
			}
		},
		computed: mapGetters(['isLogin']),
		onLoad(options) {
			if (this.isLogin) {
				this.getUserGiftCard()
			} else {
				toLogin();
			}
		},
		onShow(options) {
			if (options !== undefined && options !== null && options !== '') {
				if (options.type === 'refreshTask') {
		            // this.page = 1
					this.getUserGiftCard()
				}
			}
		},
		methods: {
			/**
			 * 授权回调
			 */
			onLoadFun: function() {
				this.getUserGiftCard()
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			changeTap(e) {
				let index = e.currentTarget.dataset.index
				if (this.tap != index) {
					this.tap = index
					this.getUserGiftCard()
				}
			},
			buyGiftcard() {
				uni.navigateTo({
					url: '../buy_giftcard/index'
				})
			},
			getUserGiftCard() {
				getUserGiftCard({
					card_status: this.tap
				}).then(res => {
					this.giftArr = res.data
				})
			},
			bindCard() { //绑定礼品卡
				if (this.card_sn == '') {
					uni.showToast({
						title: '请输入需要绑定的礼品卡号',
						icon: "none",
						duration: 2000
					})
				} else {
					bindCard({
						card_sn: this.card_sn
					}).then(res => {
						let that = this
						uni.showToast({
							title: '绑定成功',
							icon: "none",
							duration: 700,
							success() {
								that.getUserGiftCard()
							}
						})
						
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f5f6;
	}

	.content {
		padding-bottom: 124upx;
	}

	.header {
		display: flex;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		flex-direction: column;
		align-items: center;
		z-index: 99;
		background-color: #fff;
		box-shadow: 0px 4rpx 8rpx 0px rgba(236, 236, 236, 0.50);
		box-sizing: border-box;

		.tap {
			width: 100%;
			height: 94upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.tap-item {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				flex: 1;
				position: relative;
				font-size: 32upx;
				font-weight: 400;
			}

			.active {
				color: #0A77DE;
				font-weight: 500;
			}

			.active:after {
				position: absolute;
				content: '';
				bottom: 0;
				width: 50upx;
				background-color: #0A77DE;
				height: 2upx;
			}
		}
	}

	.search-view {
		width: 100%;
		padding: 20upx 0;
		background-color: #F4F5F6;

		.search-input {
			display: flex;
			width: 100%;
			align-items: center;
			justify-content: space-between;
			padding: 0 20upx;
			height: 136upx;
			box-sizing: border-box;
			background-color: #fff;

			.input-view {
				display: flex;
				align-items: center;
				height: 80upx;
				width: 540upx;
				background-color: #F9F9F9;
				border-radius: 40upx;
				padding: 0 20upx;
				box-sizing: border-box;

				input {
					flex: 1;
				}
			}

			.bind-btn {
				width: 138upx;
				height: 80upx;
				opacity: 1;
				background: #0a77de;
				border-radius: 40upx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 30upx;
				font-weight: 500;
			}
		}
	}

	.list {
		margin-top: 94upx;
	}

	.bottom-view {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 0;
		bottom: 0;
		height: 94upx;
		width: 100%;
		background-color: #fff;

		.commint-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 692upx;
			height: 88upx;
			opacity: 1;
			background: linear-gradient(90deg, #00acfe 0%, #0aace0 100%);
			border-radius: 56upx;
			color: #fff;
			font-size: 32upx;
			font-weight: 500;
		}
	}

	.paddingtop {
		padding-top: 20upx;
	}
</style>
